@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>

<style>
    .layui-card {
        margin: 5px;
    }
    .search-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }
    .search-item {
        display: flex;
        align-items: center;
    }
</style>

<div class="layui-card">
    <div class="layui-card-header">
        <div class="search-box">
            <div class="search-item">
                <label>产品编码：</label>
                <div class="layui-input-inline">
                    <input type="text" name="productCode" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="search-item">
                <label>产品名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="productName" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="search-item">
                <button class="layui-btn" id="searchBtn">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
                <button class="layui-btn layui-btn-primary" id="resetBtn">
                    <i class="layui-icon layui-icon-refresh"></i> 重置
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <table id="productTable" lay-filter="productTable"></table>
    </div>
</div>

<script>
    layui.use(['table'], function () {
        var table = layui.table;

        // 表格初始化
        table.render({
            elem: '#productTable',
            url: '/SalesOrder/GetProductList',
            method: 'get',
            cols: [[
                { field: 'productCode', title: '产品编码', width: 120 },
                { field: 'productName', title: '产品名称', width: 200 },
                { field: 'productSpec', title: '规格型号', width: 120 },
                { title: '操作', width: 100, fixed: 'right', templet: function() {
                    return '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="select">选择</a>';
                }}
            ]],
            page: true,
            limit: 10,
            response: {
                statusCode: 0
            },
            parseData: function(res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        // 监听选择按钮
        table.on('tool(productTable)', function(obj) {
            if(obj.event === 'select') {
                // 调用父页面的回调函数
                var index = parent.layer.getFrameIndex(window.name);
                parent.selectCallback(obj.data);
                parent.layer.close(index);
            }
        });

        // 搜索按钮点击事件
        $('#searchBtn').on('click', function() {
            table.reload('productTable', {
                where: {
                    productCode: $('input[name="productCode"]').val(),
                    productName: $('input[name="productName"]').val()
                }
            });
        });

        // 重置按钮点击事件
        $('#resetBtn').on('click', function() {
            $('input[name="productCode"]').val('');
            $('input[name="productName"]').val('');
            table.reload('productTable', {
                where: {
                    productCode: '',
                    productName: ''
                }
            });
        });
    });
</script> 